<template>

    <div class="addMerchantBox" v-loading="loading">
        <el-form ref="form" :model="data" :rules="rules">

            <el-form-item label="机构主体全称" prop="company">
                <el-input v-model="data.company" readonly="readonly" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="联系人姓名" prop="real_name">
                <el-input v-model="data.real_name" readonly="readonly" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="联系手机" prop="mobile">
                <el-input v-model="data.mobile" readonly="readonly" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="主营类型" prop="main_type">
                <el-input v-model="data.main_type" readonly="readonly" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="机构类型" prop="organ_type">
                <el-radio-group v-model="data.organ_type">
                    <el-radio :label="1" :key="1">企业法人</el-radio>
                    <el-radio :label="2" :key="2">个体工商户</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="营业执照注册号" prop="license_num">
                <el-input v-model="data.license_num" placeholder="请输入营业执照注册号" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="省" prop="province">
                <el-select v-model="data.province" v-if="provinceVisible" placeholder="请选择" style="width:300px"
                           @change="getCity">
                    <el-option
                            v-for="item in provinceList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
                <el-input v-model="data.province_name" readonly="readonly" v-if="provinceNameVisible"
                          style="width:300px">
                </el-input>
            </el-form-item>

            <el-form-item label="市" prop="city">
                <el-select v-model="data.city" placeholder="请选择" v-if="cityVisible" style="width:300px"
                           @change="getDistrict">
                    <el-option
                            v-for="item in cityList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
                <el-input v-model="data.city_name" readonly="readonly" v-if="cityNameVisible" style="width:300px">
                </el-input>
            </el-form-item>

            <el-form-item label="区" prop="district">
                <el-select v-model="data.district" v-if="districtVisible" placeholder="请选择" style="width:300px">
                    <el-option
                            v-for="item in districtList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
                <el-input v-model="data.district_name" readonly="readonly" v-if="districtNameVisible"
                          style="width:300px">
                </el-input>
            </el-form-item>

            <el-form-item label="详细地址" prop="address">
                <el-input v-model="data.address" placeholder="请填写主详细地址" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="营业范围" prop="scope">
                <el-input
                        style="width:400px"
                        type="textarea"
                        :autosize="{ minRows: 10}"
                        placeholder="请输入营业范围"
                        v-model="data.scope">
                </el-input>
            </el-form-item>

            <el-form-item label="营销执照扫描件" prop="license_img">
                <div class="picUpload" style="display:flex;flex-direction:row">
                    <el-upload
                            :http-request="handlePictureCardPreview"
                            :multiple="false"
                            action
                            list-type="picture-card"
                            name="license_img"
                            ref="businessLicenseUpload"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog
                            :modal="false"
                            :center="true"
                            :show-close="false"
                            class="commonVisible"
                            :visible.sync="licenseVisible"
                            :fullscreen="true"
                    >
                        <img alt class :src="data.license_img" v-show="licenseVisible">
                        <span class="hoverBox" @click="licenseVisible=false" v-show="licenseVisible">
                        <span class="deleteIcon">
                            <i class="el-icon-delete"></i>
                        </span>
                    </span>
                    </el-dialog>
                </div>
            </el-form-item>

            <el-form-item label="资质证书扫描件" prop="intelligence_img">
                <div class="picUpload" style="display:flex;flex-direction:row">
                    <el-upload
                            :http-request="handlePictureCardPreview"
                            :multiple="false"
                            action
                            list-type="picture-card"
                            name="intelligence_img"
                            ref="businessLicenseUpload"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog
                            :modal="false"
                            :center="true"
                            :show-close="false"
                            class="commonVisible"
                            :visible.sync="intelligenceVisible"
                            :fullscreen="true"
                    >
                        <img alt class :src="data.intelligence_img" v-show="intelligenceVisible">
                        <span class="hoverBox" @click="intelligenceVisible=false" v-show="intelligenceVisible">
                        <span class="deleteIcon">
                            <i class="el-icon-delete"></i>
                        </span>
                    </span>
                    </el-dialog>
                </div>
            </el-form-item>

            <el-form-item label="商标授权证件扫描" prop="trademark_img">
                <div class="picUpload" style="display:flex;flex-direction:row">
                    <el-upload
                            :http-request="handlePictureCardPreview"
                            :multiple="false"
                            action
                            list-type="picture-card"
                            name="trademark_img"
                            ref="businessLicenseUpload"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog
                            :modal="false"
                            :center="true"
                            :show-close="false"
                            class="commonVisible"
                            :visible.sync="trademarkVisible"
                            :fullscreen="true"
                    >
                        <img alt class :src="data.trademark_img" v-show="trademarkVisible">
                        <span class="hoverBox" @click="trademarkVisible=false" v-show="trademarkVisible">
                        <span class="deleteIcon">
                            <i class="el-icon-delete"></i>
                        </span>
                    </span>
                    </el-dialog>
                </div>
            </el-form-item>

            <el-form-item label="银行对公账号" prop="bank_num">
                <el-input v-model="data.bank_num" placeholder="请填写银行对公账号" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="对公账号户名" prop="bank_username">
                <el-input v-model="data.bank_username" placeholder="对公账号户名" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="对公账号开户行" prop="bank_name">
                <el-select v-model="data.bank_name" placeholder="请选择" style="width:300px" id="bankName">
                    <el-option
                            v-for="item in bankList"
                            :key="item.id"
                            :label="item.bank_name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="法人代表姓名" prop="person_name">
                <el-input v-model="data.person_name" placeholder="请输入法人代表姓名" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="法人身份证号码" prop="person_number">
                <el-input v-model="data.person_number" placeholder="请填写法人身份证号码" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="法人身份证正面" prop="person_id_card_z">
                <div class="picUpload" style="display:flex;flex-direction:row">
                    <el-upload
                            :http-request="handlePictureCardPreview"
                            :multiple="false"
                            action
                            list-type="picture-card"
                            name="cardZ"
                            ref="businessLicenseUpload"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog
                            :modal="false"
                            :center="true"
                            :show-close="false"
                            class="commonVisible"
                            :visible.sync="cardZVisible"
                            :fullscreen="true"
                    >
                        <img alt class :src="data.person_id_card_z" v-show="cardZVisible">
                        <span class="hoverBox" @click="cardZVisible=false" v-show="cardZVisible">
                        <span class="deleteIcon">
                            <i class="el-icon-delete"></i>
                        </span>
                    </span>
                    </el-dialog>
                </div>
            </el-form-item>

            <el-form-item label="法人身份证反面" prop="person_id_card_f">
                <div class="picUpload" style="display:flex;flex-direction:row">
                    <el-upload
                            :http-request="handlePictureCardPreview"
                            :multiple="false"
                            action
                            list-type="picture-card"
                            name="cardF"
                            ref="businessLicenseUpload"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog
                            :modal="false"
                            :center="true"
                            :show-close="false"
                            class="commonVisible"
                            :visible.sync="cardFVisible"
                            :fullscreen="true"
                    >
                        <img alt class :src="data.person_id_card_f" v-show="cardFVisible">
                        <span class="hoverBox" @click="cardFVisible=false" v-show="cardFVisible">
                        <span class="deleteIcon">
                            <i class="el-icon-delete"></i>
                        </span>
                    </span>
                    </el-dialog>
                </div>
            </el-form-item>
        </el-form>


        <div class="submitBtnBox">
            <el-button class="submitBtn" @click="submitFn" v-if="buttonVisible" type="primary">保存</el-button>
        </div>
        <div style="height: 80px"></div>
    </div>
</template>

<script>
    import {truncate} from 'fs';

    export default {
        name: 'certification',
        data() {
            return {
                data: {
                    organ_type: '',             //机构类型 1:企业法人 2:个体工商户
                    license_num: '',            //营业执照注册号
                    province: '',               //省
                    city: '',                   //市
                    district: '',               //区
                    address: '',                //详细地址
                    scope: '',                  //营业范围
                    license_img: '',            //营业执照扫描件
                    intelligence_img: '',       //资质证书扫描件
                    trademark_img: '',          //商标授权证件扫描
                    bank_num: '',               //银行对公账号
                    bank_username: '',          //对公账号户名
                    bank_name: '',              //对公账号开户行
                    person_name: '',            //法人代表姓名
                    person_number: '',          //法人身份证号码
                    person_id_card_z: '',       //法人身份证正面
                    person_id_card_f: '',       //法人身份证反面
                    real_name: '',
                    mobile: '',
                    company: '',
                    main_type: ''
                },
                rules: {
                    organ_type: [{required: true, message: "请选择机构类型", trigger: "blur"}],
                    license_num: [{required: true, message: "请输入营业执照注册号", trigger: "blur"}],
                    province: [{required: true, message: "请输入省", trigger: "blur"}],
                    city: [{required: true, message: "请输入市", trigger: "blur"}],
                    district: [{required: true, message: "请输入区", trigger: "blur"}],
                    address: [{required: true, message: "请输入详细地址", trigger: "blur"}],
                    scope: [{required: true, message: "请输入营业范围", trigger: "blur"}],
                    license_img: [{required: true, message: "请输入营业执照扫描件", trigger: "blur"}],
                    intelligence_img: [{required: true, message: "请输入资质证书扫描件", trigger: "blur"}],
                    trademark_img: [{required: true, message: "请输入商标授权证件扫描", trigger: "blur"}],
                    bank_num: [{required: true, message: "请输入银行对公账号", trigger: "blur"}],
                    bank_username: [{required: true, message: "请输入对公账号户名", trigger: "blur"}],
                    bank_name: [{required: true, message: "请输入法人代表对公账号开户行", trigger: "blur"}],
                    person_name: [{required: true, message: "请输入法人法人代表姓名", trigger: "blur"}],
                    person_number: [{required: true, message: "请输入法人身份证号码", trigger: "blur"}],
                    person_id_card_z: [{required: true, message: "请输入法人身份证正面", trigger: "blur"}],
                    person_id_card_f: [{required: true, message: "请输入法人身份证反面", trigger: "blur"}]
                },
                loading: false,
                provinceList: [],
                cityList: [],
                districtList: [],
                licenseVisible: true,
                intelligenceVisible: true,
                trademarkVisible: true,
                cardZVisible: true,
                cardFVisible: true,
                bankList: [],
                provinceNameVisible: false,
                cityNameVisible: false,
                districtNameVisible: false,
                provinceVisible: true,
                cityVisible: true,
                districtVisible: true,
                buttonVisible: true

            }
        },
        methods: {

            //获取认证信息
            getParentViewData() {
                this.loading = true;
                this.$http.get("/agent/info", {
                    params: {
                        token: localStorage.getItem("user_token"),
                        id: localStorage.getItem('user_id')
                    }
                }).then(response => {
                    if (response.data.status === 'success') {
                        if (
                            response.data.data.company == null
                            ||
                            response.data.data.main_type == null
                            ||
                            response.data.data.company === ''
                            ||
                            response.data.data.main_type === ''
                        ) {
                            this.$alert('请先填写基本信息', '通知消息', {
                                confirmButtonText: '确定',
                                callback: action => {
                                    this.$router.push({name: 'settingBasic'})
                                }
                            });
                        } else if (response.data.data.status === 0) {
                            this.$router.push({name: 'setting-await'});
                        } else if (response.data.data.status === 1) {
                            this.data = response.data.data;
                            this.provinceNameVisible = true;
                            this.cityNameVisible = true;
                            this.districtNameVisible = true;
                            this.provinceVisible = false;
                            this.cityVisible = false;
                            this.districtVisible = false;
                            this.buttonVisible = false;
                            document.getElementById('bankName').disabled = "disabled";
                            var demo = document.getElementsByTagName('input');
                            for (let i = 0; i < demo.length; i++) {
                                demo[i].setAttribute("readOnly", 'true');
                                demo[i].disabled = "disabled";
                            }


                        }

                    }
                    this.loading = false
                }).catch(error => {
                    console.log(error)
                    this.loading = false
                });

            },

            //获取省
            getArea(pid) {
                this.loading = true;
                this.$http.get("/api/tool/area", {params: {pid: pid}}).then(response => {
                    if (response.data.status === 'success') {
                        this.provinceList = response.data.data
                    }
                    this.loading = false
                }).catch(error => {
                    this.loading = false
                });
            },

            //获取市
            getCity(value) {
                this.loading = true;
                this.$http.get("/api/tool/area", {params: {pid: value}}).then(response => {
                    if (response.data.status === 'success') {
                        this.data.city = '';
                        this.cityList = response.data.data
                    }
                    this.loading = false
                }).catch(error => {
                    this.loading = false
                });
            },

            //获取县、区
            getDistrict(value) {
                this.loading = true;
                this.$http.get("/api/tool/area", {params: {pid: value}}).then(response => {
                    if (response.data.status === 'success') {
                        this.data.district = '';
                        this.districtList = response.data.data
                    }
                    this.loading = false
                }).catch(error => {
                    this.loading = false
                });
            },

            //获取银行列表
            getBankList() {
                this.loading = true;
                this.$http.get("/agent/bank").then(response => {
                    if (response.data.status === 'success') {
                        this.bankList = response.data.data;
                    }
                    this.loading = false
                }).catch(error => {
                    this.loading = false
                });
            },

            //上传图片
            handlePictureCardPreview(file) {
                this.loading = true;
                console.log("file-file:", file.filename);
                let imageFile = file.file;
                let formData = new FormData();
                formData.append("image", imageFile);
                formData.append("action", file.filename);
                this.$http.post("/api/tool/ali/upload/image", formData).then(response => {
                    if (response.data.status === 'success') {

                        if (file.filename === "license_img") {
                            this.data.license_img = response.data.data;
                        }

                        if (file.filename === "intelligence_img") {
                            this.data.intelligence_img = response.data.data;
                        }

                        if (file.filename === "trademark_img") {
                            this.data.trademark_img = response.data.data;
                        }

                        if (file.filename === "cardZ") {
                            this.data.person_id_card_z = response.data.data;
                        }

                        if (file.filename === "cardF") {
                            this.data.person_id_card_f = response.data.data;
                        }
                    }
                    this.loading = false;
                }).catch(error => {
                    console.log("图片上传失败", error);
                    this.loading = false;
                });
            },

            //提交信息
            submitFn() {
                this.$refs.form.validate(valid => {
                    if (!valid) {
                        return false;
                    } else {
                        this.loading = true;
                        this.data.status = 0;
                        this.data.token = localStorage.getItem('user_token');
                        this.data.agent_id = localStorage.getItem('user_id');
                        this.$http.post("/agent/info/set/authentication", this.data).then(response => {
                            if (response.data.status === 'success') {
                                this.$message({
                                    message: '保存成功',
                                    type: 'success',
                                    duration: 6000
                                });
                            } else {
                                this.$message({
                                    showClose: true,
                                    message: response.data.failedMsg[0],
                                    type: 'error'
                                });
                            }
                            this.loading = false
                        }).catch(error => {
                            console.log(error)
                            this.$message({
                                showClose: true,
                                message: '保存失败，请稍候再试',
                                type: 'error'
                            });
                            this.loading = false
                        });
                    }
                })
            }
        },
        mounted() {
            this.getParentViewData();
            this.getArea();
            this.getBankList();
            this.$refs.businessLicenseUpload.submit();
        }

    }

</script>

<style scoped lang="scss">
    @import "./setting.scss";
</style>